<template>
	<div class="contents">
		<Header></Header>
		<div class="content">
			<section>
				<van-swipe :autoplay="3000" indicator-color="white" class="banner">
					<van-swipe-item>
						<img src="../assets/img/banner2.jpg" alt="">
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/img/banner1.jpg" alt="">
					</van-swipe-item>
					<van-swipe-item>
						<img src="../assets/img/banner3.jpg" alt="">
					</van-swipe-item>
				</van-swipe>
			</section>
			<section class="nav">
				<van-row type="flex" class="navKinds">
					<van-col span="6" class="navKind">		
						<router-link to="/grow" tag="div" class="fontsize1">
							<span class="iconfont icon-zhongcao"></span>
							<p>种草</p>
						</router-link>
					</van-col>
					<van-col span="6" class="navKind">
						<router-link to="/constructor" tag="div" class="fontsize2">
							<span class="iconfont icon-shejishi-"></span>
							<p>设计师</p>
						</router-link>
					</van-col>
					<van-col span="6" class="navKind">
						<router-link to="/special" tag="div" class="fontsize3">
							<span class="iconfont icon-zhuanti"></span>
							<p>专题</p>
						</router-link>
					</van-col>
					<van-col span="6" class="navKind">
						<router-link to="/topic" tag="div" class="fontsize4">
							<span class="iconfont icon-huati1"></span>
							<p>话题</p>
						</router-link>
					</van-col>
				</van-row>
			</section>
			<section>
				<van-row>
					<van-col span="24" class="kuan">
						
					</van-col>
				</van-row>
			</section>
			<section>
			<div class="usertalk">
				<router-link to="/growdetails" tag="div" class="userimg">
					<img class="touxiang" src="../assets/img/userimg1.jpg" alt="">
					<span>韩梅梅</span>
				</router-link>
				<div class="userpl">
					<router-link to="/growdetails" tag="h4">皮裤头VS布裤头，你家是？</router-link>				
					<router-link to="/growdetails" tag="p">我是用的是皮裤头<br/>1.皮裤头好打理，不怎么沾尘土，轻轻用鸡毛掸子扫一下会就没有...[全文]</router-link>
					<router-link to="/growdetails">
						<img class="talkimg" src="../assets/img/img1.jpg" alt="">
					</router-link>
					<div class="zan">
						<span class='iconfont icon-dianzan'>52</span>
						<span class='iconfont icon-pinglun'>52</span>
						<span class='iconfont icon-shoucang'>52</span>
					</div>
				</div>
			</div>
			</section>
			<section>
			<div class="usertalk">
				<router-link to="/growdetails" tag="div" class="userimg">
					<img class="touxiang" src="../assets/img/userimg1.jpg" alt="">
					<span>韩梅梅</span>
				</router-link>
				<div class="userpl">
					<router-link to="/growdetails" tag="h4">皮裤头VS布裤头，你家是？</router-link>				
					<router-link to="/growdetails" tag="p" class="homart">我是用的是皮裤头<br/>1.皮裤头好打理，不怎么沾尘土，轻轻用鸡毛掸子扫一下会就没有...[全文]</router-link>
					<router-link to="/growdetails">
						<img class="talkimg" src="../assets/img/img1.jpg" alt="">
					</router-link>
					<div class="zan">
						<span class='iconfont icon-dianzan'>52</span>
						<span class='iconfont icon-pinglun'>52</span>
						<span class='iconfont icon-shoucang'>52</span>
					</div>
				</div>
			</div>
			</section>
		</div>
	</div>
</template>

<script>
import Header from './Header'
import Vue from 'vue'
import { Row, Col, Swipe, SwipeItem, Tabbar, TabbarItem } from 'vant'
Vue.use(Row).use(Col).use(Swipe).use(SwipeItem).use(Tabbar).use(TabbarItem)

export default {
	data () {
		return {}
	},
	components: {
		Header
	}
}
</script>

<style lang="scss" scoped="scoped">
@import '@/lib/reset.scss';
.kuan {
	height: .1rem;
	background: #efefef;
}
.content{
	.van-swipe-item{
		width:100%;
	}
	.banner{
		width: 100%;
		height: 2rem;
		// background: #f00;
		img {
			width:100%;
			height: 2rem;
		}
	}
	.nav {
		@include rect(100%, 0.76rem);
		// background: #f5f5f5;
		.navKinds {
			@include rect(100%, 100%);
			.navKind {
				@include flexbox();
				@include justify-content();
				@include align-items();
				div {
					@include flexbox();
					@include flex-direction(column);
					@include justify-content();
					@include align-items();
					@include rect(.46rem, .46rem);
					// background: #f00;
					border-radius: 50%;
					span {
						font-size: .25rem;
					}
				}
			}
		}
	}
	.usertalk{
		.userimg {
			margin: 0.05rem;
		}
		.touxiang{
			width:0.47rem;
			height:0.47rem;
			float: left;
			margin-left: 0.11rem;
			border-radius: 50%;
		}
		span{
			margin-left:0.13rem;
			line-height: 0.47rem;
			color:#101010;
			font-size: 0.14rem;
		}
		.userpl{
			padding:0 0.1rem;
				h4{
					font-weight: normal;
					color:#101010;
				}
				.homart {
					color: #353535;
					font-size: .12rem;
				}
				.talkdiv{
					width: 3.95rem;
					height:1.55rem;

				}	
				.talkimg{
					height:1.55rem;
					width:100%;
				}	
		}
	}
}
.fontsize1 {
	color: #696f80
}
.fontsize2 {
	color: #696f80
}
.fontsize3 {
	color: #696f80
}
.fontsize4 {
	color: #696f80
}
</style>

